<!--
 * @Author: zhangyongbing
 * @Date: 2022-05-07 14:54:53
 * @LastEditors: zhangyongbing
 * @LastEditTime: 2022-05-09 17:17:11
 * @Description: 单点登录 新增 编辑
 * @FilePath: /psys-ppm-web/src/pages/SystemPage/exThirdAuth/subpage/singleSignOn.vue
-->
<template>
	<div class="addOrEdit">
		<div class="manage">
			<el-form
				label-position="right"
				class="elFormWeb"
				:model="manageData"
				:rules="manageDataRule"
				ref="manageData"
				label-width="120px"
			>
				<el-form-item label="第三方系统全称" prop="fullName">
					<el-input class="others" size="mini" v-model="manageData.fullName" placeholder="第三方系统全称" clearable></el-input>
				</el-form-item>
				<el-form-item label="英文简称" prop="nameEn">
					<el-input class="others" size="mini" v-model="manageData.nameEn" placeholder="英文简称" clearable></el-input>
				</el-form-item>
				<el-form-item label="授权页面URL" prop="authUrl">
					<el-input class="others" size="mini" v-model="manageData.authUrl" placeholder="授权页面URL" clearable></el-input>
				</el-form-item>
				<el-form-item label="鉴权URL" prop="verityUrl">
					<el-input class="others" size="mini" v-model="manageData.verityUrl" placeholder="鉴权URL" clearable></el-input>
				</el-form-item>
				<el-form-item label="跳转页面URL" prop="jumpUrl">
					<el-input class="others" size="mini" v-model="manageData.jumpUrl" placeholder="跳转页面URL" clearable></el-input>
				</el-form-item>
			</el-form>
			<div class="userBtn">
				<el-button size="small" type="primary" @click="saveAdd" :disabled="loading">保 存</el-button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		//状态
		type: {
			type: String,
			default: "add",
		},
		// 关闭页面
		close: {
			type: Function,
		},
		//选中项id
		rowId: {
			type: String | Number,
		},
	},
	data() {
		let inputEn = (rule, value, callback) => {
			let reg = /^[a-zA-Z]+$/
			if (!reg.test(value)) {
				callback(new Error("请输入正确的英文简称"))
			} else {
				callback()
			}
		}
		return {
			loading: false, //编辑时防止快速点击
			manageData: {},
			//校验规则
			manageDataRule: {
				fullName: [{ required: true, message: "第三方系统全称不能为空", trigger: "blur" }],
				nameEn: [{ required: true, message: "英文简称不能为空", trigger: "blur" }, { validator: inputEn }],
				authUrl: [{ required: true, message: "授权页面URL不能为空", trigger: "blur" }],
				verityUrl: [{ required: true, message: "鉴权URL不能为空", trigger: "blur" }],
				jumpUrl: [{ required: true, message: "跳转页面URL不能为空", trigger: "blur" }],
			},
		}
	},
	async created() {
		if (this.type !== "add") {
			let params = {},
				data = {}
			const res = await this.$http.get(
				`/${this.$ServiceName}/api/external/dd_third_system/${this.$version}/get_dd_third_system_by_id?id=${this.rowId}`
			)
			console.log(res)
			if (res.data.success) {
				data = res.data.data
				if (data.id) {
					params = {
						fullName: data.fullName,
						nameEn: data.nameEn,
						authUrl: data.authUrl,
						verityUrl: data.verityUrl,
						jumpUrl: data.jumpUrl,
					}
				}
			}
			this.manageData = params
		}

		console.log(this.manageData)
	},
	mounted() {},
	methods: {
		/**
		 * @description: 保存新增
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		saveAdd() {
			this.$refs.manageData.validate(async valid => {
				if (valid) {
					let params = {
							fullName: this.manageData.fullName,
							nameEn: this.manageData.nameEn,
							authUrl: this.manageData.authUrl,
							verityUrl: this.manageData.verityUrl,
							jumpUrl: this.manageData.jumpUrl,
						},
						url = `/${this.$ServiceName}/api/external/dd_third_system/${this.$version}/insert`,
						type = "post"
					if (this.type == "edit") {
						url = `/${this.$ServiceName}/api/external/dd_third_system/${this.$version}/update_by_id`
						type = "put"
						params.id = this.rowId
					}

					const res = await this.$http[type](url, params)
					if (res.data.success) {
						this.$message.success(res.data.msg)
						this.close()
					} else {
						this.$message.error(res.data.msg)
					}
				}
			})
		},
	},
}
</script>

<style lang="less" scoped>
.addOrEdit {
	.userBtn {
		z-index: 100;
		text-align: right;
		padding-right: 20px;
		border-top: 1px solid #c8cfde;
		background-color: #f5f7fa;
		position: absolute;
		bottom: 0px;
		left: 0;
		right: 0;
		height: 50px;
		line-height: 50px;
	}
}
.manage {
	/deep/ .drawer .el-input__inner {
		width: 100% !important;
	}
	.elFormWeb {
		// height: 654px;
		padding: 10px 30px 50px 10px;
		overflow: auto;
		.authorityName {
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			padding: 5px 10px;
			min-height: 25px;
			.nameList {
				height: 25px;
				line-height: 25px;
				color: rgba(0, 0, 0, 0.8);
				// font-size: 12px;
			}
		}
	}
}
</style>
